<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue test</title>
</head>

<body>
    <!--这是我们的View-->
    <div id="app">
        <button @click="logInfo()">打印消息(default :Hello World)</button>
        <br>
        <button @click="logInfo('Self Message')">打印消息(Self Message)</button>
        <br>
        <!-- <button v-on:click="console.log('A Vue App')">打印消息(A Vue App)</button> -->
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    // 创建一个 Vue 实例
    let vm = new Vue({
        el: '#app',
        methods: {
            logInfo (msg) {
                console.log(msg || 'Hello World')
            }
        }
    })
</script>
<style>
    .italic {
        font-style: italic;
    }
    .color-gray {
        color: gray;
    }
    .size-18 {
        font-size: 20px;
    }
    .style-italic {
        font-style: italic;
    }
</style>
</html>